<template>
  <transition name="el-fade-in-linear">
    <div v-if="visible" class="com-dlg" @click.self="close1">
      <div class="wrapper" :style="{width: width ? width + 'px' : 'auto'}">
        <header
          :style="{background: type === 2 ? '#1991EB' : '#f9f9f9', color: type === 2 ? '#fff' : '#333'}"
        >
          <span>{{ title }}</span>
          <span class="close" @click="close">
            <i class="el-icon-close"></i>
          </span>
        </header>
        <div class="content-wrapper" :class="{'no-footer': !$scopedSlots.footer}">
          <div class="content" :class="{'no-padding': noPadding}">
            <slot>无数据...</slot>
          </div>
        </div>
        <div v-if="$scopedSlots.footer" class="footer">
          <slot name="footer" />
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "提示"
    },
    width: {
      type: [String, Number],
      default: null
    },
    mask: {
      type: Boolean,
      default: false
    },
    headerColor: {
      type: String,
      default: "#f9f9f9"
    },
    type: {
      type: Number,
      default: 1
    },
    noPadding: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible(v) {
      if (v) {
        this.$nextTick(function() {
          document.addEventListener("keyup", this.escHanlder);
        });
      } else {
        document.removeEventListener("keyup", this.escHanlder);
        this.close();
      }
    }
  },
  methods: {
    close1() {
      if (this.mask) {
        this.close();
      }
    },
    close() {
      this.$emit("close");
      this.$emit("update:visible", false);
    },
    escHanlder(e) {
      // 此处填写你的业务逻辑即可
      if (e.keyCode === 27) {
        this.close();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.com-dlg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #333;
  z-index: 999;
  background: rgba($color: #000000, $alpha: 0.6);
  z-index: 1001;
}
.wrapper {
  position: absolute;
  border-radius: 8px 8px 0px 0px;
  min-width: 200px;
  min-height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  overflow: hidden;
  max-width: 100%;
}
header {
  position: relative;
  height: 48px;
  font-size: 18px;
  line-height: 48px;
  padding: 0;
  padding-left: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .close {
    height: 48px;
    width: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    cursor: pointer;
    &:hover {
      color: #666;
    }
  }
}
.content-wrapper {
  background: #fff;
  position: relative;
  max-height: 80vh;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  margin: 0;
}
.content {
  margin: 20px;
  position: relative;
  &.no-padding {
    margin: 0;
  }
}
.footer {
  height: 48px;
  background: rgba(249, 249, 249, 1);
  // box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
  padding: 0 20px;
  display: flex;
  align-items: center;
  /deep/ .el-button {
    margin-right: 40px;
  }
}
</style>
